<%-- Created by IntelliJ IDEA. User: Administrator Date: 2022/12/6 Time: 21:04
To change this template use File | Settings | File Templates. --%>
<%@ page
        contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色信息</title>
    <!-- 引入 样式 和 js -->
    <jsp:include page="../../common/css_js.jsp"/>
    <jsp:include page="../../common/table.jsp"/>
    <link href="${ctx}/static/css/jstree/style.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="${ctx}/static/css/jstree/jstree.min.js"></script>
</head>
<body>
<div class="container col-lg-12">
    <div class="card">
        <header class="card-header">
            <div class="card-title">
                <b style="font-size: 25px">角色列表--所有角色信息</b>
            </div>
        </header>
        <div class="card-body">
            <!-- 条件查询表单 -->
            <form class="form-inline" name="form1" action="#" method="post">
                <label>
                    <b>角色名称：</b
                    ><input
                        name="roleName"
                        placeholder="请输入要查询的角色名称"
                        class="form-control"
                />&nbsp; </label
                >&nbsp;
                <b>状态：</b>
                <div class="custom-control custom-radio custom-control-inline">
                    <input
                            type="radio"
                            id="customRadioInline33"
                            name="isValid"
                            value=""
                            checked="checked"
                            class="custom-control-input"
                    />
                    <label class="custom-control-label" for="customRadioInline33"
                    >全部</label
                    >
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input
                            type="radio"
                            id="customRadioInline11"
                            name="isValid"
                            value="1"
                            class="custom-control-input"
                    />
                    <label class="custom-control-label" for="customRadioInline11"
                    >有效</label
                    >
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input
                            type="radio"
                            id="customRadioInline22"
                            name="isValid"
                            value="0"
                            class="custom-control-input"
                    />
                    <label class="custom-control-label" for="customRadioInline22"
                    >无效</label
                    >
                </div>
                <button type="button" class="btn btn-primary" onclick="like()">
                    <span class="mdi mdi-table-search"></span>搜索
                </button>
            </form>
            <div id="toolbar">
                <!-- 操作 -->
                &nbsp;&nbsp;<a class="btn btn-primary" href="#" onclick="toAdd()"
            ><span class="mdi mdi-plus"></span>新增角色</a
            >
                <a class="btn btn-danger" href="#" onclick="batchDel()"
                ><span class="mdi mdi-delete"></span>批量删除</a
                >
                <a class="btn btn-warning" href="#" onclick="auth()"
                ><span class="mdi mdi-shield-plus">角色授权</span></a
                >
                <a class="btn btn-primary" href="#" onclick="query()"
                ><span class="mdi mdi-table-large"></span>显示所有</a
                >
            </div>
            <!-- 数据显示 -->
            <div class="table-responsive">
                <table id="table"></table>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div
        class="modal fade bd-example-modal-lg"
        id="myModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModalLabel"
>
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">新增角色信息</h4>
                <div class="col-md-2 column"></div>
                <div class="col-md-4 column" id="close"></div>
                <button
                        type="button"
                        class="close"
                        data-dismiss="modal"
                        aria-label="Close"
                >
                    <a aria-hidden="true">&times;</a>
                </button>
            </div>
            <div class="modal-body" style="background-color: #f8faf7">
                <!-- 增加修改表单 -->
                <div class="table-responsive">
                    <form>
                        <table class="table table-bordered table-hover" id="tab333">
                            <input type="hidden" name="id"/>
                            <input type="hidden" name="updateDate"/>
                            <tr>
                                <td>角色名称：</td>
                                <td>
                                    <label
                                    ><input
                                            name="roleName"
                                            class="form-control"
                                            placeholder="请输入角色名称"
                                    /></label>
                                </td>
                            </tr>
                            <tr>
                                <td>角色备注：</td>
                                <td>
                                    <label>
                        <textarea
                                name="roleRemark"
                                rows="3"
                                class="form-control"
                                placeholder="请输入角色备注"
                        ></textarea>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>状态：</td>
                                <td>
                                    <div
                                            class="custom-control custom-radio custom-control-inline"
                                    >
                                        <input
                                                type="radio"
                                                id="customRadioInline1"
                                                name="isValid"
                                                value="1"
                                                checked="checked"
                                                class="custom-control-input"
                                        />
                                        <label
                                                class="custom-control-label"
                                                for="customRadioInline1"
                                        >有效</label
                                        >
                                    </div>
                                    <div
                                            class="custom-control custom-radio custom-control-inline"
                                    >
                                        <input
                                                type="radio"
                                                id="customRadioInline2"
                                                name="isValid"
                                                value="0"
                                                class="custom-control-input"
                                        />
                                        <label
                                                class="custom-control-label"
                                                for="customRadioInline2"
                                        >无效</label
                                        >
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>
                <button
                        type="button"
                        id="btn111"
                        class="btn btn-primary"
                        onclick="insert_update()"
                >
                    修改
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 权限模态框 -->
<div
        class="modal fade bd-example-modal-lg"
        id="myLargeModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myLargeModalLabel"
        aria-hidden="true"
>
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="myLargeModalTitle">权限设置</h6>
                <button
                        type="button"
                        class="close"
                        data-dismiss="modal"
                        aria-label="Close"
                >
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="checkbox-tree"></div>
            </div>
            <div class="modal-footer">
                <input type="hidden" name="rId"/>
                <button type="button" class="btn btn-default" id="hideAssign">
                    取消
                </button>
                <button type="button" class="btn btn-primary" onclick="assignPer()">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        // 初始化表格
        $("#table").bootstrapTable({
            classes: "table table-bordered table-hover table-striped", // 表格样式
            url: "${ctx}/role/list", // 请求后台的URL
            method: "GET", // 请求方式
            toolbar: "#toolbar", // 工具按钮容器
            pagination: true, //是否显示分页条
            pageNumber: 1, // 首页页码，默认为1
            pageSize: 5, //一页显示的行数
            paginationLoop: false, //是否开启分页条无限循环，最后一页时点击下一页是否转到第一页
            pageList: [5, 10, 20], //选择每页显示多少行，数据过少时可能会没有效果
            clickToSelect: true, // 是否启用点击选中行
            undefinedText: "-", // 当字段为 undefined 显示
            sortOrder: "asc", // 排序方式
            showColumns: true, // 是否显示所有的列
            showRefresh: true, // 是否显示刷新按钮
            showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
            showExport: true, // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
            exportDataType: "all", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
            // 响应处理
            responseHandler: function (res) {
                if (res.code !== 200) {
                    notify("mdi mdi-close", res.message, "danger");
                    return [];
                }

                return res.data;
            },
            // 查询参数
            queryParams: function () {
                return $("form:eq(0)").serializeArray(); // 得到条件查询表单中所有的值
            },
            columns: [
                {
                    // 列
                    field: "example",
                    checkbox: true, // 是否显示复选框
                },
                {
                    field: "no", // 属性名
                    align: "center", // 对齐方式
                    title: "序号", // 标题
                    formatter: function (value, row, index) {
                        //返回序号，注意index是从0开始的，所以要加上1
                        return index + 1;
                    },
                },
                {
                    field: "id",
                    title: "角色ID",
                    visible: false,
                },
                {
                    field: "roleName",
                    align: "center",
                    title: "角色名称",
                },
                {
                    field: "roleRemark",
                    align: "center",
                    title: "角色备注",
                },
                {
                    field: "isValid",
                    align: "center",
                    title: "状态",
                    formatter: function (value, row, index) {
                        // 格式化
                        if (row.isValid === 1) {
                            return "<span class='badge badge-success'>有效</sapn>";
                        } else if (row.isValid === 0) {
                            return "<span class='badge badge-danger'>无效</span>";
                        } else {
                            return "<span class='badge badge-info'>-</span>";
                        }
                    },
                },
                {
                    field: "createDate",
                    align: "center",
                    title: "创建时间",
                },
                {
                    field: "operate",
                    align: "center",
                    title: "操作",
                    formatter: btnGroup,
                    events: {
                        // 事件
                        "click .edit-btn": function (event, value, row, index) {
                            edit(row);
                        },
                        "click .del-btn": function (event, value, row, index) {
                            del(row);
                        },
                    },
                },
            ],
            onLoadSuccess: function () {
                // 数据加载成功时调用的方法
            },
            onLoadError: function () {
                // 数据加载失败时调用的方法
                setTimeout(function () {
                    notify("mdi mdi-close", "数据加载失败!", "danger");
                }, 300);
            },
            onCheck: function (row) {
                // 复选框单击事件
                getSelections();
            },
        });

        // 初始权限树
        initPerTree();

        // 权限模态框点击权限点击事件
        $("#hideAssign").click(function () {
            $("#myLargeModal").modal("hide");
        });
    });


    // 操作方法 - 新增
    function toAdd() {
        $("#myModal").modal("show"); // 模态框显示
        $("#myModalLabel").html("新增角色信息"); // 模态框标题
        $("form")[1].reset(); // 清空表单
        $("#btn111").html("保存"); // 将按钮改成保存
    }

    // 操作方法 - 删除
    function del(r) {
        if (r.id === 1) {
            setTimeout(function () {
                notify("mdi mdi-close", "系统管理员不可以删除!", "danger");
            }, 1e2);
        } else {
            remove("role", r.id)
        }
    }

    // 操作方法 - 编辑
    function edit(r) {
        $("#myModal").modal("show"); // 模态框显示
        $("#myModalLabel").html("修改角色信息"); // 模态框标题
        $("#btn111").html("修改"); // 将按钮改成保存
        // 赋值
        $("[name='id']").val(r.id);
        $("[name='roleName']:eq(1)").val(r.roleName);
        $("[name='roleRemark']").val(r.roleRemark);
        r.isValid === 1
            ? $("[name='isValid']:eq(3)").prop("checked", true)
            : $("[name='isValid']:eq(4)").prop("checked", true);
    }

    // 修改和增加用一个按钮
    function insert_update() {
        let b = false;
        let $roleName = $("[name='roleName']:eq(1)");
        let $roleRemark = $("[name='roleRemark']");

        if ($roleName.val() === "") {
            notify("mdi mdi-close", "角色为必填项！", "danger");
            $roleName.focus();
        } else if ($roleRemark.val() === "") {
            notify("mdi mdi-close", "角色备注为必填项！", "danger");
            $roleRemark.focus();
        } else {
            b = true;
        }

        if (b) {
            // 根据按钮判断是增加还是修改
            let url =
                $("#btn111").html() === "保存"
                    ? "${ctx}/role/save"
                    : "${ctx}/role/update";
            // 得到表单中所有的值
            let obj = $("form:eq(1)").serializeArray();
            saveOrUpdate(url, obj);
        }
    }

    // 操作方法 - 批量删除
    function batchDel() {
        if (getSelections().includes(1)) {
            setTimeout(function () {
                notify("mdi mdi-close", "系统管理员不可以删除!", "danger");
            }, 1e2);
        } else {
            batchDelete("role")
        }
    }

    // 初始权限树
    function initPerTree() {
        // 销毁数据
        $("#checkbox-tree").jstree("destroy");

        // 重新加载数据
        $.get("${ctx}/module/getModule", function (data) {
            $("#checkbox-tree").jstree({
                core: {
                    data: {
                        id: -1,
                        text: "全选",
                        state: {opened: true},
                        children: data,
                    },
                    themes: {
                        responsive: false,
                    },
                },
                types: {
                    default: {
                        icon: "mdi mdi-folder-outline",
                    },
                },
                plugins: ["types", "checkbox"],
            });
        });
    }

    // 操作按钮 - 授权
    function auth() {
        if (getSelections().length < 1) {
            setTimeout(function () {
                notify(
                    "mdi mdi-alert-octagon-outline",
                    "请选择至少一个角色!",
                    "warning"
                );
            }, 300);
        } else if (getSelections().length > 1) {
            setTimeout(function () {
                notify(
                    "mdi mdi-alert-octagon-outline",
                    "暂不支持多个角色授权!",
                    "danger"
                );
            }, 300);
        } else {
            window.$("#myLargeModal").modal();

            // 取消选中所有
            $("#checkbox-tree").jstree(true).uncheck_all();

            // 获取角色权限
            $.get(
                "${ctx}/module/findModuleByRoleId",
                "roleId=" + getSelections()[0],
                function (data) {
                    // 设置权限
                    $("#checkbox-tree").jstree(true).check_node(data);
                }
            );
        }
    }

    // 设置权限
    function assignPer() {
        // 获取选中的权限
        let selected = $("#checkbox-tree").jstree(true).get_selected();
        let undetermined = $("#checkbox-tree").jstree(true).get_undetermined();
        let per = selected.concat(undetermined).filter((item) => item !== "-1");

        let loader = $("body").lyearloading({
            opacity: 0.2,
            spinnerSize: "lg",
        });
        setTimeout(function () {
            $.post(
                "${ctx}/role/auth",
                "roleId=" + getSelections() + "&moduleIds=" + per,
                function (data) {
                    $("#myLargeModal").modal("hide");

                    loader.destroy();
                    if (data.code === 200) {
                        notify(
                            "mdi mdi-checkbox-marked-circle-outline",
                            data.message,
                            "success"
                        );
                    } else {
                        notify("mdi mdi-close", data.message, "danger");
                    }

                    setTimeout(function () {
                        // 权限树刷新
                        $("#checkbox-tree").jstree("refresh");
                    }, 2e2);
                }
            );
        }, 1e3);
    }
</script>
</body>
</html>
